<template>
  <div>
    <div class="container1">
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">日志管理查询条件</div>
      </div>
      <el-form ref="searchObj" :inline="true" :model="searchObj" size="mini" label-width="100px" style="margin-bottom:-10px;margin-top:10px;">
        <el-form-item label="操作人昵称">
          <el-input v-model="searchObj.nickName" placeholder="请输入操作人昵称" clearable></el-input>
        </el-form-item>
        <el-form-item style="margin-left:2rem;">
          <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
          <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="container" style="margin-top:1rem;">
      <div class="common-list-class">
        <div style="display:flex;">
          <div class="common-title-div"></div>
          <div class="common-title-text">日志管理查询列表</div>
        </div>
        <div>
        </div>
      </div>
      <!-- 查询列表 -->
      <el-table :data="tableData" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;margin-bottom:10px;" max-height="550" border>
        <el-table-column prop="nickName" label="操作人昵称" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="userName" label="操作账户" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="requestIp" label="请求IP" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="requestUrl" label="请求地址" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="操作时间" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="methodDesc" label="操作内容" show-overflow-tooltip align="center">
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import mixin from "@/mixin/mixin.js";
export default {
  name: "logmanagement",
  mixins: [mixin],
  data() {
    return {
      pageSizes: [10, 15, 50, 100],
      pagesize: 10,
      total: 10,
      currentPage: 1,
      tableData: [],
      searchObj: {},
    };
  },
  created() {
    this.query();
  },
  methods: {
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#f5f5f5;color:#626262;";
    },
    rowStyle({ row, rowIndex }) {
      let style1 = {};
      let style2 = {};
      if (rowIndex % 2 == 0) {
        style1.background = "#ffffff";
        return style1;
      } else {
        style2.background = "#f5f5f5";
        return style2;
      }
    },
    query() {
      let params = {
        nickName: this.searchObj.nickName,
        pageNumber: this.currentPage,
        pageSize: this.pagesize,
      };
      this.showLoading();
      this.$axios({
        method: "get",
        url: `/log/queryLogsByPage`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.tableData = res.data.data.list;
            this.pagesize = res.data.data.pageSize;
            this.currentPage = res.data.data.pageNum;
            this.total = res.data.data.total;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 点击分页当前页多少数据
    handleSizeChange(val) {
      this.pagesize = val;
      this.query();
    },
    // 点击分页页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.query();
    },
    //  重置
    reset() {
      this.searchObj = {};
      this.query();
    },
  },
};
</script>
<style scoped>
.common-title-flex {
  display: flex;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 2px;
}
.common-title-text {
  margin-left: 4px;
  font-size: 14px;
}
.common-list-class {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}
.upload-file >>> .el-upload--text {
  border: none;
  width: 100px;
  height: 36px;
}
</style>>